<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="description" content="觉唯设计_用户体验设计分享平台" />
	<meta name="keywords" content="关键字1,关键字2,关键字3..." />
	<!-- 使用最新的IE兼容模式渲染此网页 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<!-- 强大的CSS Reset库 -->
	<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
	<link rel="stylesheet" href="css/core.css" />
	<!-- 让IE9以下的浏览器支持HTML5标签 -->
	<!--[if lt IE 9]>
    	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
    	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<header class="header">
			<div class="top" id="top">
				<div class="content">		
					<div class="left">
						<div class="all-menu">
							<a href="#"></a>
							<div class="sub-menu">
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
										
									</ul>
								</div>
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
										
									</ul>
								</div>
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
									</ul>
								</div>
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
										<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
										
									</ul>
								</div>
							</div>
						</div>
						<div class="logo">
							<a href="#">
								<span class="icon"></span>
								<span class="globals"></span>
							</a>
						</div>
					</div>
					<div class="nav">
						<ul>
							<li><a href="index.html">Home</a></li>
							<li class="pages" class="current">
								<a href="pages.html">Pages</a>
								<ul class="sub-nav">
									<li><a href="about-us.html">About Us</a></li>
									<li><a href="vancancies-details.html">Vacancies Details</a></li>
									<li><a href="blog-details.html">Blog Details</a></li>
								</ul>
							</li>
							<li  class="pages">
								<a href="portfolio.html">Portfolio</a>
								<ul class="sub-nav">
									<li><a href="masonry-four.html">Masonry Four</a></li>
									<li><a href="masonry-three.html">Masonry Three</a></li>
									<li><a href="grid_three.html">Grid Three</a></li>
									<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
									<li><a href="landscape.html">Landscape</a></li>
									<li><a href="gallery.html">Gallery</a></li>
								</ul>
							</li>
							<li><a href="vacancies.html">Vacancies</a>
							</li>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
					<div class="right">
						<span></span>
						<ul class="sub-nav">
							<li><a href="#">About Us</a></li>
							<li><a href="#">Services</a></li>
							<li><a href="#">Vacancies</a></li>
							<li><a href="#">FAQ</a></li>
							<li><a href="#">Pricing Table</a></li>
							<li><a href="#">Our Team</a></li>	
						</ul>
					</div>
				</div>
				
			</div>
	<!-------移动端导航------->
			<div class="menu-list" id="menu-list">
				<div class="item">
					<ul class="item-menu">
						<li class="home" id="home"></li>
						<li class="more"></li>
						<li class="logo"></li>
					</ul>
					<ul id="sub-menu">
						<li><a href="index.html">Home</a></li>
						<li><a href="pages.html">pages</a></li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li><a href="vacancies.html">Vacancies</a></li>	
						<li><a href="blog.html">Blog</a></li>
						<li><a href="cantact.html">Contacts</a></li>
					</ul>
				</div>
			</div>
			
			<div class="bottom" id="bottom">
				<div class="inner">
					<div class="left">
						<a href="#">Home</a>
						<span>/</span>
						<a href="#">pages</a>
						<span>/</span>
						<a href="#" class="current">Dropdown Menu Style</a>
					</div>
					<div class="right">
						<div class="message">
							<a href="#">+</a>
							<div class="send">
								<span><i></i>Send a Message</span>
							</div>
						</div>
					</div>
				</div>
			</div>
	</header>
	<div class="vancancies-details-banner">
		<ul class="wrapper">
			<li class="inner">
				<img src="img/vancancies-details-banner.png" />
			</li>
			<li class="item">
				<h2>Web Designer</h2>
				<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum facer possim assum.</p>
			</li>
		</ul>
	</div>
	<section class="vancancies-details-container clearfix">
		<article class="content">
			<div class="guide">
				<h1>Frequently Asked Questions</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt<br />
					 ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci <br />
					 tation ullamcorper suscipit lobortis est etiam processus dynamicus.
				</p>
			</div>
			<div class="list">
				<ul>
					<li id="show0">
						<div class="items" id="items0">
							<div class="questions">
								<div class="icon-left">Q</div>
								<div class="question" >
									<h2>Duis auteym vel eum iriure dolor?</h2>
								</div>
							</div>	
							<div class="answers">
								<div class="icon-left">A</div>
								<div class="answer">
									<p class="top" id="tops0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dol
										ore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
									<p class="hide" id="hide0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
										tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
										Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dol
										ore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. 
										suscipit lobortis nis. </p>
								</div>
							</div>
						</div>                          
					</li>
					<li id="show1">
						<div class="items" id="items1">
							<div class="questions">
								<div class="icon-left">Q</div>
								<div class="question">
									<h2>Eodem qui nunc nobis?</h2>
								</div>
							</div>	
							<div class="answers">
								<div class="icon-left">A</div>
								<div class="answer">
									<p class="top" id="tops1">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc puta
										mus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
									<p class="hide" id="hide1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ma
										gna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
								</div>
							</div>
						</div>                          
					</li>
					<li id="show2">
						<div class="items" id="items2">
							<div class="questions">
								<div class="icon-left">Q</div>
								<div class="question">
									<h2>Duis autem vel eum iriure dolor in hendrerit?</h2>
								</div>
							</div>	
							<div class="answers">
								<div class="icon-left">A</div>
								<div class="answer">
									<p class="top" id="tops2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
										 erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
									<p  class="hide" id="hide2">Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber
										 tempor cum soluta nobis eleifend option congue nihil imperdiet.</p>
								</div>
							</div>
						</div>                          
					</li>		
					<li id="show3">
						<div class="items" id="items3">
							<div class="questions">
								<div class="icon-left">Q</div>
								<div class="question">
									<h2>Typi non habent claritatem insitam?</h2>
								</div>
							</div>	
							<div class="answers">
								<div class="icon-left">A</div>
								<div class="answer">
									<p class="top" id="tops3">Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula qua
										rta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
										<div class="answer">
									<p class="hide" id="hide3">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc puta
										mus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet minim veniam, quis nostrud exerci tation ullamcorper suscipit.
									class="hide" id="hide1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ma
										gna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
								</div>
								</div>
							</div>
						</div>                          
					</li>
					<li id="show4">
						<div class="items" id="items4">
							<div class="questions">
								<div class="icon-left">Q</div>
								<div class="question">
									<h2>Duis auteym vel eum iriure dolor?</h2>
								</div>
							</div>	
							<div class="answers">
								<div class="icon-left">A</div>
								<div class="answer">
									<p class="top" id="tops4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
										erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
									<p class="hide" id="hide4">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc puta
										mus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet minim veniam, quis nostrud exerci tation ullamcorper suscipit.
									class="hide" id="hide1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ma
										gna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
								</div>
								
							</div>
						</div>                          
					</li>
					<li class="last" id="show5">
						<div class="items" id="items5">
							<div class="questions">
								<div class="icon-left">Q</div>
								<div class="question">
									<h2>Ut wisi enim ad minim?</h2>
								</div>
							</div>	
							<div class="answers">
								<div class="icon-left">A</div>
								<div class="answer">
									<p class="top" id="tops5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
										erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl. </p>
										<p class="hide" id="hide5">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc puta
										mus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet minim veniam, quis nostrud exerci tation ullamcorper suscipit.
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ma
										gna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis. </p>
								</div>
							</div>
						</div>                          
					</li>
				</ul>
				<div class="button">
					<span class="butt1">Send Resume</span>
					<span class="butt2">Contact Us</span>
				</div>
			</div>
		</article>

	</section>
	<footer class="common-footer-wrapper clearfix">
		<div class="common-footer">
			<div class="common-footer-center">
				<div class="center-text">
					<span>Follow Us in Social Networks</span>
					<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
				</div>

				<ul class="center-menu">
					<li><img src="img/footer1.png" /></li>
					<li><img src="img/footer9.png" /></li>
					<li><img src="img/footer5.png" /></li>
					<li><img src="img/footer2.png" /></li>
					<li><img src="img/footer8.png" /></li>
					<li><img src="img/footer4.png" /></li>
					<li><img src="img/footer3.png" /></li>
					<li><img src="img/footer6.png" /></li>
				</ul>
			</div>
		</div>

		<div class="common-footer-bg">
			<div class="bg-text">
				<div class="text-left">
					<span>Twitter Widget</span>
					<div class="left-inner-top">
						<img src="img/footer7.png" />
						<div class="inner-top-write">
							Mirum est
							<a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse
							<a href="">http://t.co/6621 J8UFV</a>
							<p>6 MINUTES AGO</p>
						</div>
					</div>

					<div class="left-inner-bottom">
						<img src="img/footer7.png" />
						<div class="inner-bottom-write">
							<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse
							<a href="">http://t.co/6621 J8UFV</a>
							<p>18 JUN 2015</p>
						</div>
					</div>
				</div>

				<div class="text-center">
					<span>Dribble Widget</span><br /><br />
					<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
					<ul class="center-img-item">
						<li><img src="img/footer11.jpg" width="139px" height="100px" /></li>
						<li><img src="img/footer13.jpg" width="139px" height="100px" /></li>
						<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px" /></li>
						<li><img src="img/footer15.jpg" width="139px" height="100px" /></li>
						<li><img src="img/footer14.jpg" width="139px" height="100px" /></li>
						<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px" /></li>
					</ul>
				</div>

				<div class="text-right">
					<span>Email Newsletters</span><br /><br />
					<div class="right-write">
						Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
					</div>
					<div class="right-email">
						Email Address
					</div>
					<div class="right-now">
						<a href="">Subscribe Now</a>
					</div>
				</div>
			</div>
		</div>

		<div class="common-footer-copyright">
			<div class="copyright-inner">
				<img src="img/footer-copyright.png" class="copyright-img" />
				<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
			</div>
		</div>
	</footer>
	
	
	<script>
		for(var i = 0; i < 6; i++) {
			document.getElementById('items' + i).onclick = function(i) {
				return function() {
					document.getElementById('hide' + i).style.display = 'block';
					document.getElementById('tops' + i).style.display = 'none'
					event.stopPropagation();
				}
			}(i);
		}
		for(var j = 0; j < 6; j++) {
			document.getElementById('hide' + j).onclick = function(j) {
				return function() {
					document.getElementById('hide' + j).style.display = 'none';
					document.getElementById('tops' + j).style.display = 'block';
					event.stopPropagation();
				}
			}(j);
		}
	</script>
</body>

</html>